<template>
  <div class="header-box">
    <div class="l-content">
      <!-- 图标按钮 -->
      <el-button @click="handelCollapse()">
        <el-icon>
          <Grid />
        </el-icon>
      </el-button>
      <!-- 面包屑 -->

      <el-breadcrumb separator="/">

        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">{{current.label}}</el-breadcrumb-item>

      </el-breadcrumb>

    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img class="user" :src="getImgSrc('user')" alt="" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>


<script setup>
// 引入仓库
import { computed } from "vue";
import { useAside } from "../store/index.js";
const main = useAside();


// 面包屑数据
const current = computed(()=>{
  return main.currentMenu
})

// 更改仓库中的iscollapse的方法
const handelCollapse = () => {
  main.updateIsCollapse();
};

// 动态引入静态资源
const getImgSrc = (val) => {
  //    console.log(new URL(`../assets/imgs/${val}.png`, import.meta.url).href);
  return new URL(`../assets/imgs/${val}.png`, import.meta.url).href;
};
</script>




<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  .l-content {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button {
      margin-right: 20px;
    }
  }
}

.user {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>